import React from 'react';
import { TableC, FirstHeaderC } from '../../components';

class FixedHeader extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const columns = [
      { title: 'Name', key: 'name', width: '20%' },
      { title: '价格', key: 'platform', type: 'money', width: '10%' },
      { title: 'Version', key: 'version', width: '20%' },
      { title: '数值', key: 'upgradeNum', type: 'number', width: '10%' },
      { title: 'Creator', key: 'creator', width: '20%' },
      { title: 'Date', key: 'createdAt', width: '20%' },
    ];

    const data = [];
    for (let i = 0; i < 100; ++i) {
      data.push({
        key: i,
        name: 'Screem' + i,
        platform: 12345788.12,
        version: '10.3.4.5654',
        upgradeNum: 5698.23,
        creator: 'Jack',
        createdAt: '2014-12-24 23:12:00',
      });
    }

    return (
      <div style={{ width: '1000px', padding: '20px' }}>
        <FirstHeaderC title='标准表格' />
        <TableC
          columns={columns}
          dataSource={[]}
          hidePage={true}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
        />
        <TableC
          columns={columns}
          dataSource={data}
          hidePage={true}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
        />
        <br />

        {/* <table id="tScroll" style={{width:'960px',position:'fixed',top:'95px'}}>
            <thead>
                <tr>
                    {
                        columns.map(item => <th key={item.key} width={item.width}>{item.title}</th>)
                    }
                </tr>
            </thead>
        </table>

      <table id="tMain" style={{width:'960px'}}>
        <thead>
            <tr>
            {
                columns.map(item => <th key={item.key} width={item.width}>{item.title}</th>)
            }
            </tr>
        </thead>
        <tbody>
            {
                data.map( item => (
                    <tr key={item.key}>
                        <td>{item.name}</td>
                        <td>{item.platform}</td>
                        <td>{item.version}</td>
                        <td>{item.upgradeNum}</td>
                        <td>{item.creator}</td>
                        <td>{item.createdAt}</td>
                    </tr>
                ))
            }
        </tbody>
    </table> */}
      </div>
    );
  }
}

export default FixedHeader;
